import {useContext} from 'react';
import {ThemeContext} from './ThemeContextProvider';
import {Text, StyleSheet, TouchableOpacity, ScrollView} from 'react-native';
/**
 *
 * @param {Array} list
 *  {name, id}
 * activeId 选择中的id
 * onChange function 选择id
 * @returns Component
 */
export default function ({list, activeId, onChange}) {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    tabs: {},
    tabItem: {
      height: 40,
      paddingHorizontal: 24,
      backgroundColor: theme.themeColor,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 8,
      marginRight: 10,
      borderWidth: 1,
      borderColor: theme.dividerColor
    },
    tabItemAc: {
      backgroundColor: theme.primaryColor,
      borderColor: theme.primaryColor
    },
    tabItemText: {
      fontSize: 12,
      color: theme.fontColor,
    },
    tabItemTextAc: {
      fontSize: 12,
      color: theme.themeColor,
    },
  });
  return (
    <ScrollView horizontal style={styles.tabs}>
      {list.map(item => {
        return (
          <TouchableOpacity
            activeOpacity={0.7}
            style={[
              styles.tabItem,
              activeId === item.id ? styles.tabItemAc : '',
            ]}
            onPress={() => onChange(item)}
            key={item.id}>
            <Text
              style={[
                activeId === item.id
                  ? styles.tabItemTextAc
                  : styles.tabItemText,
              ]}>
              {item.name}
            </Text>
          </TouchableOpacity>
        );
      })}
    </ScrollView>
  );
}
